<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>07非单文件组件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">  
        <School></School>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const Hello = Vue.extend({
            template:`<h2>Hello</h2>`
        })
        Vue.component("Hello",Hello)
        const School = Vue.extend({                                                                                                                                                                                                                                                                                    
            template: `                                                    
            <div>
            <Hello></Hello>
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
            <button @click="name+=' ~'">修改学校名</button>
            <button @click="welcome">欢迎来到尚硅谷</button>
            `,
            data(){
                return {
                    name:'尚硅谷',
                    address:'宏福科技园',
                }
            },
            methods: {
                welcome() {                                                                                                                                                                                                                                                                                                                                                                                                                  
                    alert(`${this.name}欢迎你!`)
                }
            }
        })
        new Vue({
            el: '#demo',
            components: {School},
            // template:`School`
           
        })
    </script>
</body>

</html>